<template>
<div class="tabs">
  <van-tabs v-model="activeName" line-width="0">
    <van-tab title="关注" name="关注">
      <template #title>
        <div class="flex flex-column">
          <p class="title textAlignCenter" :class="{titleAct:activeName==='关注'}">关注</p>
          <p class="des" :class="{desAct:activeName==='关注'}">最新动态</p>
        </div>
      </template>
      <template #default>
        关注
      </template>
    </van-tab>
    <van-tab title="上新" name="上新">
      <template #title>
        <div class="flex flex-column">
          <p class="title textAlignCenter" :class="{titleAct:activeName==='上新'}">上新</p>
          <p class="des" :class="{desAct:activeName==='上新'}">新品首发</p>
        </div>
      </template>
      <template #default>
        上新
      </template>
    </van-tab>
    <van-tab title="直播" name="直播">
      <template #title>
        <div class="flex flex-column">
          <p class="title textAlignCenter" :class="{titleAct:activeName==='直播'}">直播</p>
          <p class="des" :class="{desAct:activeName==='直播'}">主播在线</p>
        </div>
      </template>
      <template #default>
        直播
      </template>
    </van-tab>
    <van-tab title="福利" name="福利">
      <template #title>
        <div class="flex flex-column">
          <p class="title textAlignCenter" :class="{titleAct:activeName==='福利'}">福利</p>
          <p class="des" :class="{desAct:activeName==='福利'}">粉丝活动</p>
        </div>
      </template>
      <template #default>
        福利
      </template>
    </van-tab>
  </van-tabs>
</div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
export default {
name: "tabs",
  data() {
    return {
      activeName: '关注',
    };
  },
}
</script>

<style lang="less" scoped>
.title{
  font-size: .5rem;
}
.des{
  font-size: .3rem;
  color: #888888;
}
.titleAct{
  color: #FF7700;
  font-weight: 550;
}
.desAct{
  border-radius: .4rem;
  padding: 0 .2rem;
  color: #fff;
  background-color: #FF7700;
}
</style>